<template>
	<view class="viewimg">
		<!-- 利用vue3异步等待组件引入图表Suspense -->
			<Suspense>
					<echarts class="echarts" :option="option" style="height: 300px;"></echarts>
			</Suspense>
	</view>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const echarts = defineAsyncComponent(() => import('@/components/echarts/echarts.vue'));
// import echarts from '@/components/echarts/echarts.vue';
import request from '@/service/request1.js';
export default {
	data() {
		return {
			option: {
			},
			
		};
	},
	onLoad() {
		
	},
	components: {
		echarts
	},
	mounted() {
		this.logstatrt();
	},

	methods: {
		logstatrt() {
			// console.log('初次调用');
			request(
				'/api/workbench/deskmode?modetype=xiaoshou',
				{
					dateRang: ['2021-09-01', '2021-09-30'],
					selectType: ''
				},
				'POST'
			).then(res => {
				console.log(res);
				res.data.result.data.forEach((e,i) => {
					this.option.legend.data.push(e.label);   //  x轴数据赋值
					this.option.series[0].data.push({name:e.label,value:e.value})  // y轴数据赋值

				});
				// console.log(this.option);
			});
			this.option = {
				tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c}%"
				    },
				
				    legend: {
				        data: []
				    },
				
				    series: [
				        {
				            name:'漏斗图',
				            type:'funnel',
				            left: '10%',
				            top: 60,
				            // x2: 80,
				            bottom: 30,
				            width: '80%',
				            // height: {totalHeight} - y - y2,
				            min: -40,
				            max: 300,
				            minSize: '0%',
				            maxSize: '100%',
				            sort: 'descending',
				            gap: 2,
				            label: {
				                show: true,
				                position: 'inside'
				            },
				            labelLine: {
				                length: 10,
				                lineStyle: {
				                    width: 1,
				                    type: 'solid'
				                }
				            },
				            itemStyle: {
				                borderColor: '#fff',
				                borderWidth: 1
				            },
				            emphasis: {
				                label: {
				                    fontSize: 20
				                }
				            },
				            data: [
				            ]
				        }
				    ]
		}}
	}
};
</script>
<style scoped lang="scss">
.viewimg {
	height: 100%;
	background-color: $uni-text-color-inverse; 
	.echarts :deep(div){
		margin:20rpx;
	}
}

</style>
